<!--
 * @Author: your name
 * @Date: 2020-08-22 22:40:59
 * @LastEditTime: 2020-08-23 19:37:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \electron8-vue-dome\src\components\Calculator.vue
-->
<template>
  <div class="Calculator">
    <div class="disolay">{{current || 0}}</div>
    <div class="btn" @click="clear">C</div>
    <div class="btn" @click="sing">+/</div>
    <div class="btn" @click="percent">%</div>
    <div @click="divide" class="operator">/</div>
    <div @click="append('7')" class="btn">7</div>
    <div @click="append('8')" class="btn">8</div>
    <div @click="append('9')" class="btn">9</div>
    <div @click="times" class="operator">*</div>
    <div @click="append('4')" class="btn">4</div>
    <div @click="append('5')" class="btn">5</div>
    <div @click="append('6')" class="btn">6</div>
    <div @click="minus" class="operator">-</div>
    <div @click="append('1')" class="btn">1</div>
    <div @click="append('2')" class="btn">2</div>
    <div @click="append('3')" class="btn">3</div>
    <div @click="add" class="operator">+</div>
    <div @click="append('0')" class="btn zero" >0</div>
    <div @click="dot" class="btn">.</div>
    <div @click="equal" class="operator">=</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: '',
      previous: null,
      operator: null,
      operatorClicked: false,
    }
  },
  methods: {
    clear() {
      console.log('0');
      this.current = ''
    },
    sing() {
      this.current = this.current.charAt(0) === '-' ? this.current.slice(1) : `-${this.current}`;
    },
    percent() {
      this.current = `${parseFloat(this.current) / 100}`
    },
    append(number){
      if(this.operatorClicked){
        this.current = '';
        this.operatorClicked = false;
      }
      this.current = `${this.current}${number}`
    },
    dot(){
      if (this.current.indexOf('.') === -1) {
        this.append('.')
      }
    },
    setPrevious(){
      this.previous = this.current; //保存第一次输入的值
      this.operatorClicked = true; 
    },
    divide(){
      this.operator = (a,b) => a / b;
      this.setPrevious()
    },
    times(){
      this.operator = (a,b) => a * b;
      this.setPrevious()
    },
    minus(){
      this.operator = (a,b) => b - a;
      this.setPrevious()
    },
    
    add(){
      this.operator = (a,b) => a + b;
      this.setPrevious()
    },
    equal(){
      this.current = `${this.operator(
        parseFloat(this.current),
        parseFloat(this.previous)
      )}`;
      this.previous = null;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Calculator {
  font-size: 40px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: minmax(50px,auto);
}
.disolay {
  grid-column: 1/5;
  background-color: #333;
  color: white;
}
.zero {
  grid-column: 1/3;
}
.btn {
  background: #e2e2e2;
  border: 1px solid #333;
}
.operator {
  background: orange;
  border: 1px solid #333;
}
</style>
